<template>
  <div>
    <van-nav-bar title="用户登录" left-text="返回" left-arrow @click-left="goBack" />

    <div class="register-panel">
      <van-field
        v-model="username"
        label="用户名"
        icon="clear"
        placeholder="请输入用户名"
        required
        @click-icon="username = ''"
        :error-message="usernameErrorMsg"
      />

      <van-field
        v-model="password"
        type="password"
        label="密码"
        placeholder="请输入密码"
        required
        :error-message="passwordErrorMsg"
      />
      <div class="register-button">
        <van-button type="primary" @click=" loginAction()" size="large" :loading="openLoading">登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import url from '@/serviceAPI.config.js'//引入接口文件
import { Toast } from "vant"; //引入vant里的Toast组件
export default {
  data() {
    return {
      username: "",
      password: "",
      openLoading: false, //是否开启用户的Loading
      usernameErrorMsg: "", //用户名错误时的提示信息
      passwordErrorMsg: "" //密码错误时的提示信息
    };
  },
  created(){
     if(localStorage.setItem){
       //判断是否登录过
           Toast.success('你已登录过')
           this.$router.push('/')
     }
  },
  methods: {
    goBack() {
      this.$router.go(-1); //编程式路由返回前一页
    },
    loginAction() {
       this.checkForm() && this.axiosLoginUser()
    },
    axiosLoginUser() {
      this.openLoading = true
      axios({
      method: "POST",
      url:url.loginUser,
      data:{
        username:this.username,
        password:this.password
      }
    }).then(res => {
          console.log(res)
          if(res.data.code == 200 && res.data.message == true ){
            new Promise((resolve,reject)=>{
                  localStorage.setItem('username',this.username)//调用本地缓存localStorage的方法,存入用户名 
                  //用setTimeout延迟的时间间隙来查看是否保存到本地
                  setTimeout(()=>{resolve()},1000)
            }).then(()=>{
                Toast.success('登录成功')
                this.$router.push('/')
            }).catch((err)=>{
               Toast.fail('登录状态保存失败')
               console.log(err)
            })
            Toast.success('登录成功')
            this.$router.push('/')
          }else{
            Toast.fail('登录失败')
            this.openLoading = false
          }
        }).catch(error => {
           Toast.fail('登录失败')
           this.openLoading = false
        }) 
    },
    //用户表单验证方法
    checkForm() {
      let isOk = true;
      if (this.username.length < 5) {
        this.usernameErrorMsg = "用户名不能小于5位";
        isOk = false;
      } else {
        this.usernameErrorMsg = "";
      }
      if (this.password.length < 6) {
        this.passwordErrorMsg = "密码不能少于6位";
        isOk = false;
      } else {
        this.passwordErrorMsg = "";
      }
      return isOk;
    }
  }
};
</script>

<style scoped>
.register-panel {
  width: 96%;
  border-radius: 5px;
  margin: 20px auto;
  padding-bottom: 50px;
}
.register-button {
  padding-top: 20px;
}
</style>